<template>
  <div>
    <el-form label-position="left" label-width="120px" style="width:100%;">
      <el-form-item label="车牌号：">{{ formData.plateNumber }}</el-form-item>
      <el-form-item label="车牌颜色：">{{ formData.color }}</el-form-item>
      <el-form-item label="拍摄时间：">{{ formData.shotTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</el-form-item>
      <el-form-item label="照片：">
        <el-row>
          <el-col :span="12">
            <el-image v-if="platePhoto" :src="platePhoto" style="width:230px;height:230px;" :preview-src-list="platePhotoArray" />
            <img v-else src="@/assets/nopic.png" style="width:230px;height:230px;">
          </el-col>
          <el-col :span="12">
            <el-image v-if="platePhoto2" :src="platePhoto2" style="width:230px;height:230px;" :preview-src-list="platePhotoArray2" />
            <img v-else src="@/assets/nopic.png" style="width:230px;height:230px;">
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button icon="el-icon-close" @click="cancel">取消</el-button>
    </div>
  </div>
</template>
<script>
import { getPlatecameraDetail } from '@/api/shortdistance';
import waves from '@/directive/waves';

export default {
  name: 'PhotoView',
  directives: { waves },
  props: {
    id: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      confirmLoading: false,
      formData: {},
      platePhoto: '',
      platePhotoArray: [],
      platePhoto2: '',
      platePhotoArray2: []
    };
  },
  created() {
    if (this.id) {
      this.getDetail(this.id);
    }
  },
  methods: {
    async getDetail(id) {
      await getPlatecameraDetail(id).then(response => {
        this.formData = response.data;
        if (this.formData && this.formData.photoUrl && this.formData.photoUrl !== '') {
          this.platePhoto = this.formData.photoUrl + '?_=' + new Date().getTime();
          this.platePhotoArray.push(this.platePhoto);
          this.platePhoto2 = this.formData.photoUrl.replace('Pictype_1', 'Pictype_0') + '?_=' + new Date().getTime();
          this.platePhotoArray2.push(this.platePhoto2);
        } else {
          this.platePhoto = '';
          this.platePhotoArray = [];
          this.platePhoto2 = '';
          this.platePhotoArray2 = [];
        }
      });
    },
    cancel() {
      this.$emit('cancelClose', false, 'photo');
    }
  }
};
</script>
